<template>
    <div class="ifbox">
        <van-nav-bar
            title="我的收藏"
            left-arrow
            @click-left="onClickLeft"
            />
            <div class="myf">
                <dl v-for="(item,i) in list" :key="i">
                    <dt>
                        <img :src="item.pimg" alt="">
                    </dt>
                    <dd>
                        <h3>{{item.pname}}</h3>
                        <p>{{item.ptime}}</p>
                        <van-icon :name="iconname" size="22" @click="tap($event)" color="rgba(255,0,0,0.4)"/>
                    </dd>
                </dl>
          
                
            </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                iconname:'like-o',
                list:[
                    {
                        "pimg":'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
                        "pname":'小坚果大能量',
                        "ptime":'2018.09.20'
                    },
                     {
                        "pimg":'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
                        "pname":'小坚果大能量',
                        "ptime":'2018.09.20'
                    },
                     {
                        "pimg":'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
                        "pname":'小坚果大能量',
                        "ptime":'2018.09.20'
                    },
                     {
                        "pimg":'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
                        "pname":'小坚果大能量',
                        "ptime":'2018.09.20'
                    }
                ]
            }
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            tap(ev){
               if( ev.target.className == "van-icon van-icon-like"){
                    ev.target.className = "van-icon van-icon-like-o"
               }else if( ev.target.className == "van-icon van-icon-like-o"){
                    ev.target.className = "van-icon van-icon-like"
               }
            }
        },
    }
</script>

<style scoped>
    .ifbox{
        height: 100%;
    }
    .myf{
        
        padding: 10px 20px;
       height: 100%;
    
    }
    .myf dl{
        width:45%;
        height: 30%;
        background: #aaa;
        border-radius: 10px;
        margin: 10px 8px;
        float: left;
        position: relative
    }
    .myf dl dt{
        
        width: 100%;
        height: 100%;
    }
    .myf dl dt img{
        width: 100%;
        height: 100%
    }
    .myf dl dd{
        position: absolute;
        top: 130px;
        left: 0px;
        width: 100%;
        height: 48%;
        border-top: 1px solid #eee;
        padding-top: 20px;
        padding-right: 10px;
        box-sizing: border-box;
        background: rgba(100, 100, 100, 0.2);
        text-align: center;
        line-height: 24px
    }
    .myf .van-icon{
        float: right;
    }
</style>